<template>
    <div>
        <a-modal
            :visible="handleModalVisible"
            :title="form.id?'编辑':'添加'"
            :maskClosable="false"
            :closable="true"
            :destroyOnClose="true"
            width="60%"
            :dialog-style="{ margin: '0 auto'}"
            wrapClassName=""
            @cancel="closeVisible"
            >
            <template slot="footer">
                <a-button @click="closeVisible">
                    取消
                </a-button>
                <a-button class="blue-btn" @click="onSubmit">
                    提交
                </a-button>
            </template>
            <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                layout="inline"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
                class="form-model-addAndEdit"
            >
                <a-form-model-item label="合同名称" prop="fhtmc">
                    <a-input v-model="form.fhtmc" class="formModel-item-input"/>
                </a-form-model-item>
                <a-form-model-item label="合同编号" prop="fhtbh">
                    <a-input v-model="form.fhtbh" class="formModel-item-input"/>
                </a-form-model-item>
                <a-form-model-item label="合同类型" prop="fhtlx">
                    <!-- <a-input v-model="form.fhtlx" class="formModel-item-input"/> -->
                    <compSelector
                        v-model:value="form.fhtlx"
                        :defaultValue="[form.fhtlx]"
                        :compType="typeSelect"
                        dictionaryType="内控合同类型"
                        class="compSelector compSelectorHydd"
                        style="width:300px;display:inline-block;"/>
                </a-form-model-item>
                <!-- <a-form-model-item label="合同状态" prop="fhtzt">
                    <a-input v-model="form.fhtzt" class="formModel-item-input"/>
                </a-form-model-item> -->
                <a-form-model-item label="合同说明" prop="fhtsm">
                    <a-input v-model="form.fhtsm" class="formModel-item-input"/>
                </a-form-model-item>
                <a-form-model-item label="签订金额" prop="fhtje">
                    <a-input-number v-model="form.fhtje" :min="1" class="formModel-item-input"/>
                </a-form-model-item>
                <!-- <a-form-model-item label="合同支付进度">
                    <a-input-number v-model="form.fhtzfjd" class="formModel-item-input"/>
                </a-form-model-item> -->
                <a-form-model-item label="交付时间" prop="fjfsj">
                    <a-date-picker
                        v-model="form.fjfsj"
                        @change="timeChang($event,'fjfsj')"
                        class="formModel-item-input"
                        />
                </a-form-model-item>
                <a-form-model-item label="交付截止时间" prop="fjfjzsj">
                    <a-date-picker
                        v-model="form.fjfjzsj"
                        @change="timeChang($event,'fjfjzsj')"
                        class="formModel-item-input"
                        />
                </a-form-model-item>
                <!-- <a-form-model-item label="交付金额">
                    <a-input-number v-model="form.fzfje" class="formModel-item-input"/>
                </a-form-model-item> -->
                 <a-form-model-item label="签订公司" prop="qdgs">
                    <a-input v-model="form.qdgs" class="formModel-item-input"/>
                </a-form-model-item>
                <a-form-model-item label="签订时间" prop="qdsj">
                    <a-date-picker
                        v-model="form.qdsj"
                        @change="timeChang($event,'qdsj')"
                        class="formModel-item-input"
                        />
                </a-form-model-item>
                <a-form-model-item label="收入支出类型" prop="srzclx">
                    <span>{{ form.srzclx }}</span>
                </a-form-model-item>
                <a-form-model-item label="选择审批单">
                    <a-button v-if="!form.fxzswid" class="blue-btn" @click="checkApplyfor">选择</a-button>
                    <a-input v-if="form.fxzswid" v-model="form.fxzswmc" @click="checkApplyfor"></a-input>
                </a-form-model-item>
                <a-form-model-item label="附件">
                    <div>
                        <a-form layout="inline" style="display: flex;justify-content: flex-start;">
                        <a-form-item >
                            <a-upload style="display: inline-block;" :beforeUpload="beforeUpload" action="" @change="uploadClick">
                                <a-button class="blue-btn">上传文件</a-button>
                            </a-upload>
                        </a-form-item>
                        </a-form>
                        <a-list item-layout="horizontal" :data-source="filesListData">
                            <a-list-item slot="renderItem" slot-scope="item, index">
                                <a-list-item-meta>
                                    <a @click="openFiles(item)" slot="title" href="#">{{ item.fmc }}</a>
                                </a-list-item-meta>
                                <a-button style="margin-right: 10px;" class="blue-btn" @click="openFiles(item)" >预览</a-button>
                                <a-button style="margin-right: 10px;" class="blue-btn" @click="downloadFiles(item)" >下载文件</a-button>
                                <a-button class="red-btn" style="margin-right: 10px;" @click="deleteFiles(item.id)" >删除文件</a-button>
                            </a-list-item>
                        </a-list>
                    </div>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
        <applyforDialog ref="applyforDialogRef" @getApplyfor="getApplyfor"></applyforDialog>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector'
import {typeSelect} from '@/components/compSearchCriteria/ContractType'
import { add,edit,fjupload,fjedit,openFile,downLoadOa,fjlist,deleleMinioFile,} from './service/index'
import moment from 'moment'
import applyforDialog from './applyforDialog.vue'
import YchConstant from '@/api/YchConstant'
export default {
  props:{
    passObj:{
      type:[Array,Object],
      default: () => {},
      required:false
    },
    addType: {
        type:String,
        default: '',
        required:false
    }
  },
  components:{
    compSelector,applyforDialog
  },
  data() {
    return {
      moment:moment,
      typeSelect:typeSelect,
      handleModalVisible: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      form: {
        fhtbh: "",
        fhtje: null,
        fhtlx: "",
        fhtmc: "",
        fhtsm: "",
        fhtzfjd: 0,
        // fhtzt: "",
        fjfjzsj: null,
        fjfsj: null,
        fzfje: 0,
        id: "",
        fxzswid: null,
        fxzswmc: '',
        qdgs: "",
        qdsj: null,
        srzclx: this.addType,
      },
      kongForm: {},
      rules: {
        fhtmc: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
        fhtbh: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
        fhtlx: [{ required: true, message: '请输入合同类型', trigger: 'blur' }],
        // fhtzt: [{ required: true, message: '请输入合同状态', trigger: 'blur' }],
        fhtsm: [{ required: true, message: '请输入合同说明', trigger: 'blur' }],
        fjfsj: [{ required: true, message: '请输入交付时间', trigger: 'change' }],
        fjfjzsj: [{ required: true, message: '请输入交付截止时间', trigger: 'change' }],
        qdgs: [{ required: true, message: '请输入签订公司', trigger: 'blur' }],
        fhtje: [{ required: true, message: '请输入签订金额', trigger: 'blur' }],
        qdsj: [{ required: true, message: '请输入签订时间', trigger: 'change' }],
      },
      filesListData: [],
    }
  },
  created() {
    this.kongForm = JSON.parse(JSON.stringify(this.form))
  },
  watch: {
    passObj(newval,oldVal){
      //console.log(newval)
      if(newval.id){
        this.form = newval
        fjlist({foaid:newval.id}).then(res => {
            this.filesListData = []
            this.filesListData = res.result.records
        })
      }
    },
    addType(newval,oldVal){
        //console.log('addType',newval)
        this.form.srzclx = newval
    }
  },
  methods: {
    // 右上角关闭后的回调
    closeVisible(e){
      this.$emit('success')
      this.handleModalVisible = false
      this.form = {...this.kongForm}
      this.filesListData = []
    },
    timeChang(val,name){
        let data = this.form
        data[name] = val == null?null:moment(val).format('YYYY-MM-DD')
    },
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
            let data = this.form
            if(this.form.id){
                edit(data).then(res => {
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.closeVisible()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            } else {
                add(data).then(res => {
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.closeVisible()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            }
        } else {
          //console.log('error submit!!');
          return false;
        }
      });
    },
    checkApplyfor(){
        this.$refs.applyforDialogRef.resetEvent()
        this.$refs.applyforDialogRef.visible = true
    },
    getApplyfor(val){
        if(val){
            //console.log(val)
            this.form.fxzswmc = val.fsx
            this.form.fxzswid = val.id
            if(this.form.id){
                let data = {
                    id:this.form.id,
                    fxzswmc: this.form.fxzswmc,
                    fxzswid: this.form.fxzswid
                }
                edit(data).then(res => {
                    if(res.code == 200){
                        this.$message.success(res.message)
                    } else {
                        this.$message.error(res.message)
                    }
                })
            }
        }
    },
    beforeUpload(e){
        return false
    },
    // 上传附件
    async uploadClick({file}){
        //console.log(file)
        //console.log(this.form)
        if(!this.form.id){
            let data = this.form
            const res = await add(data)
            // //console.log(res,res.result)
            // this.form = res.result
            this.form.id = res.result
            if (res.success) {
            this.uploadClicka(file,this.form.id)
            }
        } else {
            this.uploadClicka(file,this.form.id)
        }
        },
        uploadClicka(file,id){
            //console.log(file)
            var that = this
                if(typeof file.uid !== 'undefined') {
                const fileData = new FormData();
                fileData.append("file",file);
                fileData.append("oaid",id);
                //console.log(fileData)
                fjupload(fileData).then(res => {
                    //console.log('fileData',res)
                    if (res.success) {
                    that.$message.success(res.message)
                    fjlist({foaid:id}).then(res => {
                        that.filesListData = []
                        that.filesListData = res.result.records
                    })
                    } else {
                    that.$message.warning(res.message)
                    }
                })
            }
        },
        // 预览
        openFiles(item){
          if(item.fwjlx.indexOf('pdf') !== -1){
              //console.log()
              window.open(
                  bootConfig[process.env.NODE_ENV].locality_ApI2+YchConstant.SPZX_OA+'/oaFjzyk/downLoadOa?id='+item.id
              )
            } else {
              openFile({id:item.id}).then(res => {
                if(!res.success){
                      this.$message.warning('当前附件类型不支持预览,请下载查看')
                } else {
                    window.open(res.result.wordUrl, '_blank')
                }
              })
            }
        },
        // 下载附件
        downloadFiles(val){
          //console.log('下载',val)
          var that = this
          var fileName = val.fmc
          downLoadOa({id:val.id}).then((data) => {
            // //console.log(data)
              if (!data) {
                  that.$message.warning('文件下载失败')
                  return
              }
              let url = window.URL.createObjectURL(new Blob([data], { type: blobType.type[blobType.suffix.indexOf(val.fwjlx)] }))
              let link = document.createElement('a')
              link.style.display = 'none'
              link.href = url
              link.setAttribute('download', fileName)
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link) //下载完成移除元素
              window.URL.revokeObjectURL(url) //释放掉blob对象
              // this.vxModal.visabled = false;
          })
        },
        // 删除附件
        deleteFiles(idd){
            //console.log('idd',idd)
            deleleMinioFile({id:idd}).then(res => {
            if(res.code == 200){
              this.$message.success('删除成功')
              fjlist({foaid:this.form.id}).then(res => {
                this.filesListData = []
                this.filesListData = res.result.records
              })
            } else {
              this.$message.warning(res.message)
            }
          })
        },
  },
}
</script>
<style lang="less" scoped>
.compSelectorHydd {
    div:first-child {
      width: 100%;
    }
}
.form-model-addAndEdit{
    width: 100%;
    .ant-form-item {
        width: 45%;
        // .ant-form-item-label{
        //     width: 180px !important;
        // }
        // .ant-form-item-control-wrapper{
        //     width: 180px !important;
        //     .ant-form-item-control {}
        // }
    }
    .formModel-item-input {
        width: 100%;
    }
}
</style>
